<template>
<div class="app-container">
    <div style="margin-bottom: 10px">
      <el-button type="primary" size="mini" @click="addRecruit">新增</el-button>
    </div>
    <el-table
      :data="tableData"
      highlight-current-row
      style="width: 100%; margin-bottom: 10px"
    >
      <el-table-column
        align="center"
        label="名字"
        prop="name"
      >
      </el-table-column>
      <el-table-column
        align="center"
        label="logo"
        prop="logoUrl"
      >
      <template slot-scope="scope">
                    <div style="height:160px">
                        <img  style="height:100%" :src="`${scope.row.logoUrl}`" alt="">
                    </div>
                </template>
      </el-table-column>
      <el-table-column align="center">
        <template slot-scope="scope">
          <el-button icon="el-icon-edit" size="mini" type="warning" @click="editBtn(scope.row)">
            编辑</el-button
          >
          <el-button
            icon="el-icon-delete-solid"
            size="mini" type="danger"
            @click="handleDelete(scope.row)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>

      <el-dialog :title="title" :visible.sync="dialogVisible" width="40%">
      <el-form
        :model="ruleForm"
        :rules="rules"
        ref="ruleForm"
        label-width="150px"
        class="formStyle"
      > 
        <el-form-item label="标题" prop="name">
          <el-input style="width: 217px" v-model="ruleForm.name"></el-input>
        </el-form-item>   
        <el-form-item label="logo" prop="logoUrl">
           <imgUpload
              :imageUrl="ruleForm.logoUrl"
               v-model="ruleForm.logoUrl"
             
            ></imgUpload>
        </el-form-item>
      
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="editEnter">确 定</el-button>
      </span>
    </el-dialog>
</div>
</template>

<script>
import {
  PersonLogoList,
  editPersonLogo,
  addPersonLogo,
  removePersonLogo,
} from "@/api/banch/people.js";
import imgUpload from "@/components/myImgUpload/index.vue"
export default {
components: {
  imgUpload,
},
data() {
return {
      title:"新增人员logo",
       tableData:[],
       dialogVisible: false,
      ruleForm:{
          name:"",
          logoUrl:''
      },
       rules: {
        name: [
          { required: true, message: "请输入视频案列名称", trigger: "blur" },
        ],
      },
};
},
mounted() {
     this.getList()
},
methods: {
      getList(){
           PersonLogoList().then((res)=>{
             this.tableData=res.rows
           },err=>{
             
           })
      },
      addRecruit(){
        this.dialogVisible = true;
        this.title = "新增人员logo";
       this.ruleForm.name="",
       this.ruleForm.logoUrl=""
    
     },
      editBtn(row){
       this.title = "编辑人员logo";
       this.dialogVisible = true;
         this.ruleForm.name=row.name
       this.ruleForm.logoUrl=row.logoUrl
       this.ruleForm.id=row.id
      },
      handleDelete(row){
         this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
            removePersonLogo(row.id).then(res=>{
               this.$message({
                     message:'删除成功',
                     type:"success"
                   })
                   this.dialogVisible = false;
                     this.getList()
          },err=>{
                this.$message({
                     message:'删除失败',
                     type:"error"
                   })
                    this.dialogVisible = false;
          })
        
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });          
        });
        
      },
      editEnter(){
      
         this.$refs.ruleForm.validate((val)=>{
           if(val){
              if(this.title=="新增人员logo"){
                 addPersonLogo(this.ruleForm).then(res=>{
                 
                   this.$message({
                     message:'新增成功',
                     type:"success"
                   })
                   this.dialogVisible = false;
                     this.getList()
                 },err=>{
                 
                     this.$message({
                     message:'新增失败',
                     type:"error"
                   })
                    this.dialogVisible = false;
                 })
              }else{
                 editPersonLogo(this.ruleForm).then(res=>{
                  
                     this.$message({
                     message:'修改成功',
                     type:"success"
                   })
                    this.dialogVisible = false;
                      this.getList()
                 },err=>{
                 
                      this.$message({
                     message:'修改失败',
                     type:"error"
                   })
                    this.dialogVisible = false;
                 })
              }
           }
         })
      }
},
}
</script>
<style  scoped>

</style>